<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue2.js"></script>
    <!--    引入vue路由js文件-->
    <script src="../js/vue-router.js"></script>
</head>
<body>

<!--
    .路由切换时参数的传递
      1. queryString   ?username=tom&password=12345
      2. path           /login/tom/123456     restful
-->
<div id="app">
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
    <hr>
    <h3>路由切换的方式1 超链接a</h3>
    <a href="#/login?username=tom&password=123456">登录</a>
    <a href="#/register/jack/888888">注册</a>
    <hr>

    <h3>路由切换的方式3 router-link to:object</h3>

    <router-link :to="{pah:'login',query:{username:'xiaoming',password:'123456'}}">登录</router-link>
    <router-link :to="{name:'register',params:{username:'xiaohei',password:'123456'}}">注册</router-link>
    <hr>
    <!--    使用javascript代码实现路由切换-->
    <h3>路由切换的方式4 javascript代码</h3>
    <button @click="login">登录</button>
    <button @click="register">注册</button>

</div>

<script>

    //    定义登录组件
    const login = {
        template: `
        <div>
            <h2>欢迎登录</h2>
            <form action="javascript:;">
                <p><input type="text" placeholder="请输入用户名" v-model="username"></p>
                <p><input type="password" placeholder="请输入密码" v-model="password"></p>
                <button>立即登录</button>
            </form>
        </div>
        `,
        data() {
            return {
                username: '',
                password: ''
            }
        },
        created() {
            console.log("---------login组件实例对象被创建--------")
            // 当前路由对象  this.$route

           /* let username = this.$route.query.username   // {username:tom,password:123456}
            let password = this.$route.query.password*/

            console.log(this.$route)

            // 解构赋值 es6
            let {username,password} = this.$route.query
            console.log(username,":",password)
            this.username = username
            this.password = password

        }
    }

    // 定义注册组件
    const register = {
        template: `
        <div>
            <h2>欢迎注册</h2>
            <form action="javascript:;">
                <p><input type="text" placeholder="请输入用户名" v-model="username"></p>
                <p><input type="password" placeholder="请输入密码" v-model="password"></p>
                <button>立即登录</button>
            </form>
        </div>
        `,
        data(){
            return{
                username:'',
                password:''
            }
        },
        created() {
            console.log("-------------register对象被创建--------------")
            console.log(this.$route.params)
            let {username,password} = this.$route.params
            console.log(username,":",password)
            this.username = username
            this.password = password
        }
    }

    // 定义404组件
    const filenotfound = {
        template: `
            <div>
                    页面找不到,请重试
            </div>
        `
    }

    // 定义路由列表
    const routes = [
        {
            path: "/",
            redirect: '/login',
        },
        {
            path: '/login',
            component: login,
            name: 'login'
        },
        {
            // path: '/register/:username/:password',
            path:'/login',
            component: register,
            name: 'register'
        }, {
            path: '/**',
            component: filenotfound
        }
    ]
    // 3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes
    })

    // 4.创建和挂载根实例。
    let vm = new Vue({
        el: '#app',
        data: {},
        methods: {
            login() {
                // 如何通过js代码实现路由切换  路由管理对象
                // this.$router.push("/login")
                // this.$router.push({path: '/login'})
                this.$router.push({path: '/login',query:{username:'tom',password:'123456'}})
            },
            register() {
                // this.$router.push("/register")
                // this.$router.push({name: 'register'})
                this.$router.push({name: 'register',params:{username:'lucy',password:'123456'}})
            }
        },
        router
    })

</script>
</body>
</html>